<!-- src/views/HomeView.vue -->
<template>
	<div id="pjax-container">
		<TimeDisplay />
		<!-- 卡片区域 -->
		<div class="card-wrap">
			<div class="row central">
				<CardComponent
					image="/src/assets/images/diandian.png"
					title="点点滴滴"
					description="记录我们在一起的点点滴滴"
					link="/little"
				/>

				<CardComponent
					image="/src/assets/images/liuyan.png"
					title="留言板"
					description="有什么话想对我说吗"
					link="/leaving"
				/>

				<CardComponent
					image="/src/assets/images/about.png"
					title="关于我们"
					description="关于我们之间的故事"
					link="/about"
				/>
			</div>
			<div class="row central card-b">
				<CardComponent
					image="/src/assets/images/loveimg.png"
					title="Love Photo"
					description="恋爱相册 记录最美瞬间"
					link="/photo"
				/>
				<CardComponent
					image="/src/assets/images/xinf.png"
					title="Love List"
					description="恋爱列表 你我之间的约定"
					link="/list"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import TimeDisplay from "../components/TimeDisplay.vue"
import CardComponent from "../components/CardComponent.vue"
</script>

<style lang="scss" scoped>
#pjax-container {
	// background: url("/src/assets/images/gzx.jpg") no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	padding: 1rem;
	color: #fff;
}

.card-wrap {
	margin: 0;
	padding: 0;
	border: 0;
}
.row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2rem;
}
.card-b {
	display: flex;
	justify-content: space-around;
	.card {
		width: 38%;
	}
}
@media (min-width: 768px) {
	.central {
		width: 1180px;
		margin: 2rem auto;
		padding: 1rem;
		box-sizing: border-box;
	}
}
// @media (min-width: 960) {
// 	.central {
// 		width: 930px;
// 		margin: 2rem auto;
// 		padding: 1rem;
// 		box-sizing: border-box;
// 	}
// }
@media (max-width: 768px) {
	.central {
		width: 100%;
		margin: 2rem auto;
		padding: 1rem;
		box-sizing: border-box;
	}
	.card-b {
		display: flex;
		flex-direction: column;
		.card {
			width: 97%;
		}
	}
}
.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}
.fadeInUp {
	animation-name: fadeInUp;
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
</style>
